Pills
A pill represents an object that can be viewed with or without an icon
Base
Preview
About Pills
To create a pill, apply the .slds-pill class on a <span>.
Depending on your context, you will either need a linked pill or a pill option inside of a listbox.
For linked pills, a modifier class of slds-pill_link needs to be added to the existing <span> with the classname of slds-pill. You need an <a> inside of the span with the slds-pill_link class. The <a> will get the classname of slds-pill__action. This will treat the interactions differently from an unlinked pill option inside of a listbox.
For both linked pills and unlinked pill options, a <span> with the classname of slds-pill__label should contain the string of text describing the pill object.
Note, that a linked pill should not be used as a pill option inside of a listbox.
Additionally, a pill can have an icon or image that sits to the left-hand side of the .slds-pill__label. That icon or image should receive the class .slds-pill__icon_container.
You may also want the functionality to remove the pill as a selection. An "X" icon is normally used and will sit to the right-hand side of the .slds-pill__label. That icon should receive the class .slds-pill__remove.
A .slds-pill_container can be used as a visual container for multiple pill(s).
Overview of CSS Classes
| Selector | .slds-pill |
|---|---|
| Summary | Initializes pill |
| Support | dev-ready |
| Restrict | span |
| Variant | True |
| Selector | .slds-pill_bare |
|---|---|
| Summary | Modifier that removes border and background from a pill |
| Restrict | .slds-pill |
| Modifier | True |
| Selector | .slds-pill__label |
|---|---|
| Summary | Line of text inside a pill |
| Restrict | .slds-pill a, .slds-pill span |
| Selector | .slds-pill__icon_container |
|---|---|
| Summary | Initializes pill icon or avatar that sits to the left of the label |
| Restrict | .slds-pill span |
| Selector | .slds-pill__remove |
|---|---|
| Summary | Initializes remove icon in pill that sits to the right of the label |
| Restrict | .slds-pill button, .slds-pill span |
| Selector | .slds-pill_link |
|---|---|
| Summary | Creates a pill with a hyperlink |
| Restrict | .slds-pill |
| Selector | .slds-pill__action |
|---|---|
| Summary | Actionable element inside of pill with hyperlink |
| Restrict | .slds-pill_link a |
| Selector | .slds-has-error |
|---|---|
| Summary | Pill error styles |
| Restrict | .slds-pill |
| Modifier | True |
| Selector | .slds-listbox [role="listbox"] |
|---|---|
| Summary | A listbox of Pills is a way to display a list of selected options when performing user input |
| Restrict | .slds-pill |
| Variant | True |